// NOTE: Make sure to reload the browser with cache disabled after making changes to this file.
export default {
  template: `
    <div ref="floatWindow" class="fixed border-solid border-2 border-sky-500 bg-lime-50 min-w-[480px] z-[5000]">
        <div ref="floatHeader" class="flex cursor-move p-2.5 bg-lime-200 opacity-50 hover:opacity-90 items-center justify-between">
            <span class="text-base font-sans items-center w-100"><strong> {{fwTitle}} </strong></span>
            <button ref="floatCloseBtn" @click="hideElement" class="text-base font-serif cursor-pointer"><strong>╳</strong></button>
        </div>
        <div v-if="fwShowContent"><span v-html="fwContent"></span></div>
        <slot></slot>
    </div>
    `,
  data() {
    return {
      isDragging: false,
      offsetX: 0,
      offsetY: 0,
      fwTitle: this.title,
      fwContent: this.content,
      fwShowContent: this.showcontent,
    };
  },
  props: {
    title: String,
    showcontent: Boolean,
    content: String,
  },
  mounted() {
    this.$nextTick(); // NOTE: wait for data updated
    this.$refs.floatHeader.addEventListener('mousedown', (e) => {
      this.isDragging = true;
      this.offsetX = e.clientX-this.$refs.floatWindow.getBoundingClientRect().left;
      this.offsetY = e.clientY-this.$refs.floatWindow.getBoundingClientRect().top;
      this.$refs.floatWindow.style.transition = 'none'; // 禁用过渡效果
      // add mouse move and up enent listener
      document.addEventListener('mousemove', this.mouseMoving);
      document.addEventListener('mouseup', this.mouseStop);
      // this.$emit("mouseclick", "mouse down", this.isDragging);
    });
    //this.$refs.floatCloseBtn.addEventListener('click', () => {
    //  this.$refs.floatWindow.style.display = 'none';
    //  this.$emit("btnclick", "float window closed");
    //});
  },
  methods: {
    mouseMoving(e) {
      if (this.isDragging) {
        this.$refs.floatWindow.style.left = `${e.clientX-this.offsetX}px`;
        this.$refs.floatWindow.style.top = `${e.clientY-this.offsetY}px`;
        // this.$emit("mouseclick", "mouse moving", this.isDragging);
      }
    },
    mouseStop() {
      this.isDragging = false;
      this.$refs.floatWindow.style.transition = ''; // 恢复过渡效果
      // remove listener
      document.removeEventListener('mousemove', this.mouseMoving);
      document.removeEventListener('mouseup', this.mouseStop);
      // this.$emit("mouseclick", "mouse up");
    },
    hideElement() {
      this.$refs.floatWindow.style.display = 'none';
      this.$emit("windowhide", "float window hide");
    },
    showElement() {
      this.$refs.floatWindow.style.display = 'block';
    },
    update() {
      this.fwShowContent = this.showcontent;
      this.fwContent = this.content;
      this.fwTitle = this.title;
    },
  },
};
